﻿<div class="kt-login__form" [@routerTransition]>
    <div class="kt-login__title">
        <h3>
            {{"PaymentInfo" | localize}}
        </h3>

        <div class="kt-separator kt-separator--border-dashed"></div>

        <form class="kt-form mt-2" method="post">
            <h4 class="text-center mb-4">
                {{"Extend_Edition_Description" | localize:edition.displayName}}
            </h4>

            <div class="form-group" *ngIf="edition.dailyPrice > 0">
                <label class="kt-radio">
                    <input class="form-control" type="radio" name="PaymentPeriodType"
                           checked
                           [value]="paymentPeriodType.Daily"
                           (change)="onPaymentPeriodChangeChange(paymentPeriodType.Daily)" />{{"DailyPrice" | localize}}: {{appSession.application.currencySign}}{{edition.dailyPrice | number : '1.2-2'}}
                    <span></span>
                </label>
            </div>

            <div class="form-group" *ngIf="edition.weeklyPrice > 0">
                <label class="kt-radio">
                    <input class="form-control" type="radio" name="PaymentPeriodType"
                           checked
                           [value]="paymentPeriodType.Weekly"
                           (change)="onPaymentPeriodChangeChange(paymentPeriodType.Weekly)" />{{"WeeklyPrice" | localize}}: {{appSession.application.currencySign}}{{edition.weeklyPrice | number : '1.2-2'}}
                    <span></span>
                </label>
            </div>

            <div class="form-group" *ngIf="edition.monthlyPrice > 0">
                <label class="kt-radio">
                    <input class="form-control" type="radio" name="PaymentPeriodType"
                           checked
                           [value]="paymentPeriodType.Monthly"
                           (change)="onPaymentPeriodChangeChange(paymentPeriodType.Monthly)" />{{"MonthlyPrice" | localize}}: {{appSession.application.currencySign}}{{edition.monthlyPrice | number : '1.2-2'}}
                    <span></span>
                </label>
            </div>

            <div class="form-group" *ngIf="edition.annualPrice > 0">
                <label class="kt-radio">
                    <input class="form-control" type="radio" name="PaymentPeriodType"
                           [value]="paymentPeriodType.Annual"
                           (change)="onPaymentPeriodChangeChange(paymentPeriodType.Annual)" />{{"AnnualPrice" | localize}}: {{appSession.application.currencySign}}{{edition.annualPrice | number : '1.2-2'}}
                    <span></span>
                </label>
            </div>

            <div class="kt-form__actions mt-4">
                <button *ngFor="let paymentGateway of paymentGateways"
                        (click)="checkout(paymentGateway.gatewayType)"
                        class="btn btn-success btn-block">
                    {{"CheckoutWith" + getPaymentGatewayType(paymentGateway.gatewayType) | localize}}
                </button>
            </div>
        </form>
    </div>
</div>
